<template>
  <div class="console">
    <!--数据卡片-->
    <a-row :gutter="[12, 12]">
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
        <a-card title="访问量" size="small" :bordered="false" hoverable class="top-card">
          <template #extra>
            <a-tag color="green">日</a-tag>
          </template>
          <a-skeleton v-if="loading" animation>
            <a-skeleton-line :rows="4" />
          </a-skeleton>
          <template v-else>
            <div class="flex justify-between px-1 py-1">
              <CountTo :startVal="1" :endVal="info.visits.dayVisits" class="text-3xl" />
            </div>
            <div class="flex justify-between px-1 py-1">
              <div class="text-sm">
                日同比
                <CountTo :startVal="1" suffix="%" :endVal="info.visits.rise" />
                <icon-caret-up :style="{ color: `var(--color-success-light-4)` }" />
              </div>
              <div class="text-sm">
                周同比
                <CountTo :startVal="1" suffix="%" :endVal="info.visits.decline" />
                <icon-caret-up :style="{ color: `var(--color-success-light-4)` }" />
              </div>
            </div>
            <a-divider style="margin: 16px 0 10px 0" />
            <div class="flex justify-between py-1">
              <div class="text-sm"> 总访问量：</div>
              <div class="text-sm">
                <CountTo :startVal="1" :endVal="info.visits.amount" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
        <a-card title="销售额" size="small" :bordered="false" hoverable class="top-card">
          <template #extra>
            <a-tag color="blue">周</a-tag>
          </template>
          <a-skeleton v-if="loading" animation>
            <a-skeleton-line :rows="4" />
          </a-skeleton>
          <template v-else>
            <div class="flex justify-between px-1 py-1">
              <CountTo
                prefix="￥"
                :startVal="1"
                :endVal="info.saleroom.weekSaleroom"
                class="text-3xl"
              />
            </div>
            <div class="flex justify-between px-2 py-1">
              <div class="flex-1 text-sm">
                <a-progress :percent="70" status="active" />
              </div>
            </div>
            <a-divider style="margin: 16px 0 10px 0" />
            <div class="flex justify-between py-1">
              <div class="text-sm"> 总销售额：</div>
              <div class="text-sm">
                <CountTo prefix="￥" :startVal="1" :endVal="info.saleroom.amount" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
        <a-card title="订单量" size="small" :bordered="false" hoverable class="top-card">
          <template #extra>
            <a-tag color="orangered">周</a-tag>
          </template>
          <a-skeleton v-if="loading" animation>
            <a-skeleton-line :rows="4" />
          </a-skeleton>
          <template v-else>
            <div class="flex justify-between px-1 py-1">
              <CountTo :startVal="1" :endVal="info.orderLarge.weekLarge" class="text-3xl" />
            </div>
            <div class="flex justify-between px-1 py-1">
              <div class="text-sm">
                日同比
                <CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.rise" />
                <icon-caret-down :style="{ color: `var(--color-danger-light-4)` }" />
              </div>
              <div class="text-sm">
                周同比
                <CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.decline" />
                <icon-caret-down :style="{ color: `var(--color-danger-light-4)` }" />
              </div>
            </div>
            <a-divider style="margin: 16px 0 10px 0" />
            <div class="flex justify-between py-1">
              <a-skeleton v-if="loading" animation>
                <a-skeleton-line :rows="4" />
              </a-skeleton>
              <template v-else>
                <div class="text-sm"> 转化率：</div>
                <div class="text-sm">
                  <CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.amount" />
                </div>
              </template>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
        <a-card title="成交额" size="small" :bordered="false" hoverable class="top-card">
          <template #extra>
            <a-tag color="red">月</a-tag>
          </template>
          <a-skeleton v-if="loading" animation>
            <a-skeleton-line :rows="4" />
          </a-skeleton>
          <template v-else>
            <div class="flex justify-between px-1 py-1">
              <CountTo prefix="￥" :startVal="1" :endVal="info.volume.weekLarge" class="text-3xl" />
            </div>
            <div class="flex justify-between px-1 py-1">
              <div class="text-sm">
                月同比
                <CountTo :startVal="1" suffix="%" :endVal="info.volume.rise" />
                <icon-caret-down :style="{ color: `var(--color-danger-light-4)` }" />
              </div>
              <div class="text-sm">
                月同比
                <CountTo :startVal="1" suffix="%" :endVal="info.volume.decline" />
                <icon-caret-up :style="{ color: `var(--color-success-light-4)` }" />
              </div>
            </div>
            <a-divider style="margin: 16px 0 10px 0" />
            <div class="flex justify-between py-1">
              <a-skeleton v-if="loading" animation>
                <a-skeleton-line :rows="4" />
              </a-skeleton>
              <template v-else>
                <div class="text-sm"> 总成交额：</div>
                <div class="text-sm">
                  <CountTo prefix="￥" :startVal="1" :endVal="info.volume.amount" />
                </div>
              </template>
            </div>
          </template>
        </a-card>
      </a-col>
    </a-row>

    <!--导航卡片-->
    <div class="mt-1.5">
      <a-row :gutter="[12, 12]">
        <a-col
          :xs="24"
          :sm="12"
          :md="6"
          :lg="6"
          :xl="3"
          v-for="(item, index) in iconList"
          :key="index"
        >
          <a-card size="small" :bordered="false" hoverable>
            <a-skeleton v-if="loading" animation>
              <a-skeleton-line :rows="3" />
            </a-skeleton>
            <div class="cursor-pointer py-2" v-else>
              <p class="flex justify-center">
                <i :style="{ width: '32px', color: item.color, fontSize: `${item.size}px` }">
                  <component
                    :is="item.icon"
                    :style="{ color: item.color, fontSize: `${item.size}px` }"
                    v-on="item.eventObject || {}"
                  />
                </i>
              </p>
              <p class="flex justify-center mb-0"
                ><span>{{ item.title }}</span></p
              >
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="mt-2">
      <a-row :gutter="[12, 12]" class="demo-row">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="18">
          <a-card class="card-1" :bordered="false">
            <template #title>
              <h3><icon-ordered-list class="warning-6 mr-2" />任务计划</h3>
            </template>
            <template #extra>
              <a-link>更多</a-link>
            </template>
            <a-table
              :data="toDoTasks"
              :pagination="false"
              :bordered="false"
              :scroll="{ x: 768, y: 0 }"
            >
              <template #columns>
                <a-table-column title="任务说明" data-index="task" align="left" :width="300" />
                <a-table-column title="模块" data-index="modular" align="center" />
                <a-table-column title="协作者" data-index="collaborators" align="center">
                  <template #cell="{ record }">
                    <a-avatar-group :max-count="5">
                      <a-avatar
                        v-for="(item, index) in record.collaborators"
                        :key="index"
                        :size="30"
                        ><img :src="item.avatar"
                      /></a-avatar>
                    </a-avatar-group>
                  </template>
                </a-table-column>
                <a-table-column title="测试者" data-index="tester" align="center">
                  <template #cell="{ record }">
                    <a-avatar-group :max-count="5">
                      <a-avatar v-for="(item, index) in record.tester" :key="index" :size="30"
                        ><img :src="item.avatar"
                      /></a-avatar>
                    </a-avatar-group>
                  </template>
                </a-table-column>
                <a-table-column title="完成度" data-index="isComplete" align="center">
                  <template #cell="{ record }">
                    <a-tag :color="record.isComplete ? 'red' : 'green'">{{
                      record.isComplete ? '是' : '否'
                    }}</a-tag>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="6">
          <a-card class="card-6" :bordered="false">
            <div>
              <a-skeleton-line v-if="loading" :rows="6" />
              <template v-else>
                <Pie />
              </template>
            </div>
            <a-table
              :data="getRevenue"
              :columns="columns"
              :pagination="false"
              :bordered="false"
              size="medium"
              class="revenueTable"
            />
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!--访问量 | 流量趋势-->
    <a-skeleton v-if="loading" animation>
      <a-skeleton-line :rows="10" />
    </a-skeleton>
    <template v-else>
      <VisiTab />
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, computed, reactive } from 'vue';
  import Pie from '../console/components/Pie.vue';
  import { getConsoleInfo } from '@/api/dashboard/console';
  import VisiTab from '../console/components/VisiTab.vue';
  import { CountTo } from '@/components/CountTo/index';
  import {
    UsergroupAddOutlined,
    BarChartOutlined,
    ShoppingCartOutlined,
    AccountBookOutlined,
    CreditCardOutlined,
    MailOutlined,
    TagsOutlined,
    SettingOutlined,
  } from '@vicons/antd';
  import { avatarEnum } from '@/enums/avatarEnum';

  const loading = ref(true);
  const info = reactive<any>({
    saleroom: {},
    orderLarge: {},
    visits: {},
    volume: {},
  });

  // 图标列表
  const iconList = [
    {
      icon: UsergroupAddOutlined,
      size: '32',
      title: '用户',
      color: '#69c0ff',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: BarChartOutlined,
      size: '32',
      title: '分析',
      color: '#69c0ff',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: ShoppingCartOutlined,
      size: '32',
      title: '商品',
      color: '#ff9c6e',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: AccountBookOutlined,
      size: '32',
      title: '订单',
      color: '#b37feb',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: CreditCardOutlined,
      size: '32',
      title: '票据',
      color: '#ffd666',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: MailOutlined,
      size: '32',
      title: '消息',
      color: '#5cdbd3',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: TagsOutlined,
      size: '32',
      title: '标签',
      color: '#ff85c0',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: SettingOutlined,
      size: '32',
      title: '配置',
      color: '#ffc069',
      eventObject: {
        click: () => {},
      },
    },
  ];

  onMounted(async () => {
    const res = await getConsoleInfo();
    info.saleroom = res.saleroom;
    info.orderLarge = res.orderLarge;
    info.visits = res.visits;
    info.volume = res.volume;
    loading.value = false;
  });

  //待办任务
  const toDoTasks = [
    {
      id: 1,
      task: '支付页面增加飞贷分期的选择',
      modular: '支付',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg1,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg2,
        },
        {
          id: 3,
          avatar: avatarEnum.avatarImg3,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg4,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg5,
        },
      ],
      isComplete: true,
    },
    {
      id: 2,
      task: '新增banner轮播图广告',
      modular: '广告',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg2,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg3,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg6,
        },
      ],
      isComplete: false,
    },
    {
      id: 3,
      task: '开发微信小程序',
      modular: '营销',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg5,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg1,
        },
      ],
      isComplete: false,
    },
    {
      id: 4,
      task: '支付页面增加支付宝支付',
      modular: '支付',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg1,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg2,
        },
        {
          id: 3,
          avatar: avatarEnum.avatarImg3,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg4,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg5,
        },
      ],
      isComplete: true,
    },
    {
      id: 5,
      task: '新增弹出框广告增强效果',
      modular: '广告',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg2,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg3,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg6,
        },
      ],
      isComplete: false,
    },
    {
      id: 6,
      task: '新增微信支付',
      modular: '支付',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg5,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg1,
        },
      ],
      isComplete: false,
    },
    {
      id: 7,
      task: '新增百度商桥',
      modular: '营销',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg6,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg2,
        },
      ],
      isComplete: false,
    },
  ];

  //收入表列描述信息
  const columns = [
    {
      title: '来源',
      dataIndex: 'source',
    },
    {
      title: '收入',
      dataIndex: 'value',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '占比',
      dataIndex: 'answer',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
  ];

  //收入表
  const revenue: any = [
    {
      id: 1,
      source: '互联网',
      value: 525,
      answer: '',
    },
    {
      id: 2,
      source: '实体门店',
      value: 305,
      answer: '',
    },
    {
      id: 3,
      source: '境外',
      value: 134,
      answer: '',
    },
    {
      id: 4,
      source: '其他',
      value: 60,
      answer: '',
    },
  ];

  //计算总数
  const getTotal = revenue.reduce((a, b) => {
    return a + b.value;
  }, 0);

  const getRevenue = computed(() => {
    revenue.forEach((item) => {
      item.answer = answerCount(item.value);
    });
    return revenue;
  });

  //计算百分比
  function answerCount(value: number) {
    return Math.floor((value / getTotal) * 100) + '%';
  }
</script>

<style lang="less" scoped>
  .arco-card:not(.top-card):hover {
    transform: translateY(-4px);
  }

  :deep(.revenueTable) {
    th,
    td {
      text-align: right;
    }
    tr {
      th:first-of-type,
      td:first-child {
        text-align: center;
      }
    }
    .arco-table-cell-with-sorter {
      justify-content: end;
    }
  }
</style>
